/**
 * @fileoverview Connect Screen for bluetooth devices.
 *
 * @license Copyright 2015 The Coding with Chrome Authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * @author mbordihn@google.com (Markus Bordihn)
 */

{namespace cwc.soy.connectScreen.Bluetooth autoescape="strict"}


/**
 * Bluetooth device template.
 */
{template .template}
  {@param ble: bool}
  {@param devices: ?}
  {@param found_devices: bool}
  {@param prefix: string}

  {if $found_devices} 
    {call .devices data="all" /}
  {else}
    {msg desc=""}@@CONNECT_SCREEN__CONNECT_NOTE{/msg}
  {/if}

  {if $ble}
    <button id="{$prefix}search-button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
      <i class="material-icons">add</i> {msg desc=""}@@CONNECT_SCREEN__SEARCH_FOR_DEVICE{/msg}
    </button>
  {/if}
{/template}


/**
 * Devices template.
 */
{template .devices}
  {@param devices: ?}
  {@param prefix: string}

  <ul id="{$prefix}device-list" class="mdl-list">
    {foreach $device in keys($devices)}

      {call .device_}
        {param address: $devices[$device]['address'] /}
        {param connected: $devices[$device]['connected'] /}
        {param icon: $devices[$device]['icon'] /}
        {param id: $devices[$device]['id'] /}
        {param name: $devices[$device]['name'] /}
        {param type: $devices[$device]['type'] /}
      {/call}

    {/foreach}
  </ul>
{/template}


/**
 * Connect devices template.
 */
{template .connect}
  {@param device: ?}
  {@param? error: bool}
  {@param prefix: string}


  {if $error}
    <i class="material-icons" style="color: #f00; vertical-align: middle;">error</i>
    Unable to connect device {$device['name']} ({$device['type']}), 
    please check device and Bluetooth paring in your Operation System. 
  {else}
    {msg desc=""}Connecting device{/msg} {$device['name']} ({$device['type']})
    {sp}{msg desc=""}at{/msg}{sp}
      {if $device['address']}
        {$device['address']}
      {elseif $device['id']}
        {$device['id']}
      {/if}
    ...
    <div id="{$prefix}connect-progress">
      <div class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
    </div>
  {/if}
{/template}


/**
 * Disconnect devices template.
 */
{template .disconnect}
  {@param device: ?}
  {@param prefix: string}

  {msg desc=""}Disconnecting device{/msg} {$device['name']} ({$device['type']})
  {sp}{msg desc=""}at{/msg}{sp}
    {if $device['address']}
      {$device['address']}
    {elseif $device['id']}
      {$device['id']}
    {/if}
  ...
  <div id="{$prefix}disconnect-progress">
    <div class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
  </div>
{/template}


/**
 * Request device template.
 */
{template .requestDevice}
  {@param ble: bool}
  {@param device: ?}
  {@param prefix: string}

  <p>
    {msg desc=""}@@CONNECT_SCREEN__TURN_ON_NOTE{/msg} {$device['name']}
  </p>

  {if $ble}
    <button id="{$prefix}search-button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
      <i class="material-icons">add</i> {msg desc=""}@@CONNECT_SCREEN__SEARCH_FOR{/msg} {$device['name']} ...
    </button>
  {/if}
{/template}


/**
 * Bluetooth device template.
 */
{template .device_}
  {@param address: string}
  {@param connected: bool}
  {@param icon: string}
  {@param id: string}
  {@param name: string}
  {@param type: string}

  <li class="mdl-list__item mdl-list__item--three-line">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons mdl-list__item-avatar">
        {if $icon}
          {$icon}
        {else}
          devices_other
        {/if}
      </i>
      {if $connected}
        <span>{$name}</span>
      {else}
        <span class="link_text"
          data-action="connect"
          {if $address}
            data-address="{$address}"
          {elseif $id}
            data-id="{$id}"
          {/if}
          title="{msg desc=""}Connect {$type} device{/msg}">
          {$name}
        </span>
      {/if}
      <span class="mdl-list__item-text-body">
        {if $address}
          {msg desc=""}Address{/msg}: {$address}<br>
        {elseif $id}
          {msg desc=""}Id{/msg}: {$id}<br>
        {/if}
        {msg desc=""}{$type}{/msg}
      </span>
    </span>
    <span class="">
      {if $connected}
        <i class="link_button material-icons"
          data-action="disconnect"
          {if $address}
            data-address="{$address}"
          {elseif $id}
            data-id="{$id}"
          {/if}
          title="{msg desc=""}Disconnect {$type} device{/msg}">
          bluetooth_connected
        </i>
      {else}
        <i class="link_button material-icons"
          data-action="connect"
          {if $address}
            data-address="{$address}"
          {elseif $id}
            data-id="{$id}"
          {/if}
          title="{msg desc=""}Connect {$type} device{/msg}">
          bluetooth
        </i>
      {/if}
    </span>
  </li>
{/template}
